<template>
  <el-dialog title="选择设备" :visible.sync="open" :close-on-click-modal="false" append-to-body>
    <div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="用户编号" prop="terminalId">
          <el-input
            v-model="queryParams.terminalId"
            placeholder="请输入用户编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备名称" prop="terminalName">
          <el-input
            v-model="queryParams.terminalName"
            placeholder="请输入设备名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      border
      stripe
      ref="tableData"
      @row-click="singleElection">
      <el-table-column label="用户编号" width="240" align="left">
        <template slot-scope="scope">
          <el-radio class="radio" v-model="templateSelection" :label="scope.row.terminalID">
            {{
              scope.row.terminalID
            }}
          </el-radio>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="id" label="ID"></el-table-column>-->
      <el-table-column prop="terminalName" label="设备名称"></el-table-column>
      <el-table-column prop="terminalInstallAddr" label="安装地址"></el-table-column>
      <el-table-column prop="caliber" label="口径" align="center" width="120"></el-table-column>
    </el-table>

    <pagination :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="loadUnbindTerminals"/>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="chooseAndReturn">选择并返回</el-button>
      <el-button type="danger" @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getUnbindTerminals} from '@/api/leakage/terminalsInfo'

export default {
  name: "UnbindTerminalSelector",
  props: {
    callback: {
      type: Function,
      default: (data) => {

      }
    }
  },
  data() {
    return {
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        terminalId: null,
        terminalName: null,
        areaId: null,
        used: null,
      },
      templateSelection: '',
      currentSelectedRow: undefined,
      // 总条数
      total: 6,
      // 返回数据
      tableData: []
    }
  },
  methods: {
    openDialog(zone, used) {
      this.open = true
      this.queryParams.tenantId = zone.tenantId
      this.queryParams.areaId = zone.areaId
      this.queryParams.used = used
      this.loadUnbindTerminals()
    },
    chooseAndReturn() {
      if (this.currentSelectedRow == undefined) {
        this.$message.error('请先选择一个设备')
      } else {
        this.callback(this.currentSelectedRow)
        this.cancel()
      }
    },
    cancel() {
      this.currentSelectedRow = undefined
      this.open = false
    },
    singleElection(row) {
      // this.templateSelection = this.tableData.indexOf(row);
      this.templateSelection = row.id
      this.currentSelectedRow = row
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.loadUnbindTerminals();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询区域管理列表 */
    loadUnbindTerminals() {
      getUnbindTerminals(this.queryParams).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
  }
}
</script>

<style scoped>

</style>
